<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="layui/layui.js" charset="utf-8"></script>
    <script src="../layui/jquery-3.2.1.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>

    body {
        background-color: #8ea4f8;
        background-repeat: no-repeat;
        background-size: cover;
        /*背景图适应屏幕*/
    }

    .login_box {
        width: 400px;
        height: 500px;
        background-color: #fff;
        margin: auto;
        margin-top: 150px;
        border-radius: 5px;
        overflow: hidden;
        /* . title设置margin-top无效，给父元素设置overflow: hidden;*/
    }

    .title {
        text-align: center;
        font-size: 28px;
        color: #000;
        margin-top: 80px;
        margin-bottom: 10px;
        letter-spacing: 3px;
        font-family: sans-serif;
    }

    .input_box {
        width: 300px;
        height: 30px;
        padding-left: 10px;
        margin-top: 20px;
        margin-left: 50px;
    }

    .button_box {
        width: 320px;
        height: 35px;
        margin-top: 96px;
        margin-left: 50px;
        border-radius: 5px;
        background-color: #64a9d9;
        cursor: pointer;
        color: #fff;
    }

    .input_box1 {
        /*用div的样式代替select的样式*/
        width: 304px;
        height: 40px;
        border-radius: 5px;
        /*盒子阴影修饰作用, 自己随意 */
        box-shadow: 0 0 5px #ccc;
        position: relative;

        padding-left: 0px;
        margin-top: 20px;
        margin-left: 51px;
    }

    select {
        /*border: none;*/
        /*清除select聚焦时候的边框颜色 */
        outline: none;
        /*将select的宽高等于div的宽高 */
        width: 102%;
        height: 40px;
        line-height: 40px;
        /*/ / 隐藏select的下拉图标 */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /*/ / 通过padding-left的值让文字居中*/
        padding-left: 10px;
    }

    /*//使用伪类给select添加自己想用的图标*/
    div:after {
        content: "";
        width: 14px;
        height: 8px;
        /*通过定位将图标放在合适的位置*/
        position: absolute;
        right: 20px;
        top: 45%;
        /*给自定义的图标实现点击下来功能*/
        pointer-events: none;
    }


    .mybox input {
        width: 100%;
        padding: 3px 5px;
        padding-right: 80px;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #DDD;
        outline: none;
        border-radius: 3px;
    }

    .mybox span {
        position: absolute;
        display: block;
        width: 46px;
        height: 34px;
        right: 2px;
        top: 2px;
        line-height: 34px;
        background-color: red;
        color: #ffffff;
    }
</style>
<body>

<form class="ui form error" method="post" action="/login">
    <div class="login_box">
        <h1 class="title">基于SSM的宿舍管理系统</h1>
        <input class="input_box" id="username" name="username" type="text" placeholder="用户名">
        <input class="input_box" id="password" name="password" type="password" placeholder="密码">


        <div style="display: flex;position: absolute;">
            <input class="input_box" id="code" type="text" required="required" placeholder="验证码">
            <div style="position: absolute;right: 2px;top: 2px;margin-top: 20px;">
                <img alt="验证码" id="scode" src="/getCode" onclick="javascript:flushCode();">
            </div>

        </div>

        <div class="input_box1">
            <select id="roleName">
                <option>超级管理员</option>
                <option>用户</option>
            </select>
        </div>

        <input class="button_box" id="sub" type="button" value="登录">
    </div>

</form>
</body>

<script type="text/javascript">
    $('#sub').on("click", function () {
        var username = $("#username").val();
        var password = $("#password").val();
        var code = $("#code").val();

        var obj = document.getElementById("itemlist");
        alert(obj.options[obj.selectedIndex].value);
        var roleName = obj.options[obj.selectedIndex].value;


        if (code === "") {
            alert("验证码不能为空,请输入内容");
        }

        $.ajax({
            type: "POST",
            //后端访问的地址 datatype :text  是纯文本返回
            url: "/user/login",
            data: {"username": username, "password": password, "code": code, "roleName": roleName},
            dataType: "text",
            success: function (data) {
                if (this.data) {
                    //登录成功跳转
                    console.log(data);
                    // alert(data);
                    let res = JSON.parse(data);
                    if (res.code === 200) {
                        alert(res.msg);
                        window.location.href = "demo.html";
                    } else {
                        alert(res.msg);
                        window.location.href = "index.html";
                    }
                } else {
                    //登录成功跳转登录失败500
                    window.location.href = "500.html";
                }
            }
        })
    })

    function flushCode() {
        // 每次刷新的时候获取当前时间，防止浏览器缓存刷新失败
        var time = new Date();
        document.getElementById("scode").src = "/getCode?time=" + time;
    }

</script>


</html>